<template>
  <div class="views">
    <div class="views-tools">
      <div class="views-tools-item">
        <el-button link @click="editView" :disabled="selectRowIndex===0">
          <el-icon size="18" color="#337ecc">
            <Edit/>
          </el-icon>
          <span style="font-size: 14px;">设计视图</span>
        </el-button>
      </div>
      <div class="views-tools-item">
        <el-button link @click="addView">
          <el-icon size="18" color="#b88230">
            <CirclePlus/>
          </el-icon>
          <span style="font-size: 14px;">新建视图</span>
        </el-button>
      </div>
      <div class="views-tools-item">
        <el-button link @click="deleteView" :disabled="selectRowIndex===0">
          <el-icon size="18" color="#c45656">
            <Remove/>
          </el-icon>
          <span style="font-size: 14px;">删除视图</span>
        </el-button>
      </div>
      <div class="views-tools-item">
        <el-button link @click="openView" :disabled="selectRowIndex===0">
          <el-icon size="18" color="#409EFF">
            <FolderOpened/>
          </el-icon>
          <span style="font-size: 14px;">打开视图</span>
        </el-button>
      </div>
      <div class="views-tools-item">
        <el-button link @click="showSearchInput" v-if="!searchInput">
          <el-icon size="18">
            <Search/>
          </el-icon>
        </el-button>
        <el-input  v-model="searchContent" style="width: 240px"   size="small" prefix-icon="Search" clearable @change="searchTableName" @clear="clearSearch" v-else />
      </div>
    </div>
    <div class="function-table">
      <el-table :data="tableList" v-loading="loading" border size="small" height="calc(100vh - 150px)"  @row-dblclick="dblSelectRow" highlight-current-row @row-click="tableClickRow">
        <el-table-column type="index" width="50" fixed >
          <template #default="scope">
            <div style="width: 100%;display: flex;justify-content: flex-start;">
              <div v-if="selectRowIndex===(scope.$index+1)"><el-icon size="18"><CaretRight /></el-icon></div>
              <div>{{initIndex(scope.$index)}}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column   label="名"  prop="TABLE_NAME" show-overflow-tooltip />
        <el-table-column   label="是否更新"  prop="IS_UPDATABLE" show-overflow-tooltip />
        <el-table-column   label="脚本"  prop="VIEW_DEFINITION" show-overflow-tooltip />
      </el-table>
    </div>
  </div>
</template>

<script setup name="MysqlTableQueryView">
import {formatDate,formatTime} from "@/utils/dateUtils";
const {proxy} = getCurrentInstance();
const tableInfoData = reactive({
  loading:false,
  selectRowIndex:0,
  tableCount:0,
  selectRow:null,
  tableList: null,
  showSqlBox:false,
  connectionInfo:null,
  searchInput:false,
  searchContent:null,
})
const {loading,selectRowIndex,tableCount,tableList,selectRow,showSqlBox,connectionInfo,searchInput,searchContent}=toRefs(tableInfoData)

function initData() {
  let query=proxy.$route.query
  if(connectionInfo.value==null){
    let connect=proxy.$appStore.connectList.find(row=>row.id===(query.connectId*1))
    connect.database=query.databaseName
    connectionInfo.value=connect
  }
  let params={}
  params.databaseKey=query.databaseName
  proxy.$userIpc.invoke(proxy.$ipcRouters.mysqlMng.getQueryViews,connectionInfo.value,params).then(res=>{
    if(res.code===200){
      tableCount.value=res.data.dataList.length;
      tableList.value=res.data.dataList;
    }else {
      proxy.$modal.alertError(res.message);
    }
  })
}

function initIndex(index) {
  let rowIndex = index + 1
  if(tableCount.value===0){
    loading.value = false
  }else if(rowIndex===tableCount.value){
    loading.value = false
  }
  return rowIndex;
}

function tableClickRow(row,column,event){
  selectRowIndex.value=(tableList.value.indexOf(row)+1)
  selectRow.value=row
}

function getRouteRow(query) {
  let row = {}
  Object.keys(query).forEach(key => {
    row[key] = query[key]
  })
  return row
}

function editView(){
  let row=getRouteRow(proxy.$route.query)
  Object.keys(selectRow.value).forEach(key => {
    row[key] = selectRow.value[key]
  })
  proxy.$router.push({name:'queryViewInfo',query:row})
}

function addView(){
  let row=getRouteRow(proxy.$route.query)
  proxy.$router.push({name:'queryViewInfo',query:row})
}

function deleteView(){
  proxy.$modal.confirm('是否确认删除当前查询视图？').then(function() {
    let params={}
    params.runScript="DROP VIEW `"+selectRow.value.TABLE_NAME+"`"
    return proxy.$userIpc.invoke(proxy.$ipcRouters.mysqlMng.runConsole,connectionInfo.value,params);
  }).then(() => {
    initData()
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {});
}

function openView(){
  let query=proxy.$route.query
  query.tableName="`"+selectRow.value.TABLE_NAME+"`"
  proxy.$router.push({name:'ShowMysqlTable',query:query})
}

function dblSelectRow(row, column, event){
  selectRow.value=row
  selectRowIndex.value=(tableList.value.indexOf(row)+1)
  openView()
}


function showSearchInput(){
  searchInput.value=true
}

function searchTableName() {
  if(searchContent.value&&searchContent.value.trim().length>0){
    tableList.value=tableList.value.filter(row=>row.TABLE_NAME.includes(searchContent.value));
    tableCount.value=tableList.value.length
  }else {
    clearSearch()
    initData()
  }
}

function clearSearch() {
  searchInput.value=false;
  searchContent.value=null;
}


initData()
</script>

<style scoped lang="scss">
.views{
  user-select: text;
}
.views-tools{
  display: flex;
  justify-content: flex-start;
  height: 32px;
  line-height: 32px;
}
</style>
